<template>
  <div>
    <!--
      导入组件
      最终结果: excel表格中的数据 -> 数据库
      插件完成的事儿: 把excel文件解析成js数据类型(对象/数组)
      后续的事情: 把解析过后的js数据按照接口要求 调用后端接口完成 真实的导入（重点）

      整体流程：
        点击导入按钮  唤起文件选择框  选择文件  文件校验  解析成功回调  拿到解析之后的数据
        对数据进行二次加工  调用后端的导入接口  接口完毕数据落库
    -->
    <upload-excel :before-upload="beforeUpload" :on-success="onSuccess" />
  </div>
</template>

<script>
import { importEmployee } from '@/api/employee'
import { getImportData } from '@/utils/excelData'
export default {
  name: 'Upload',
  methods: {
    // 解析前的校验 只有函数返回值是true 才会进行解析的动作
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    // 解析成功之后自动调用的钩子函数
    async onSuccess({ results, header }) {
      console.log(results, header)
      // 把excel解析成js格式的数据
      // 把解析过的数据做二次处理 变成接口要求的格式
      // 调用接口
      const data = getImportData(results)
      await importEmployee(data)
      // 返回员工
      this.$router.back()
    }
  }
}
</script>

